<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>显示模式</title>
		<style>/* 加颜色的地方 */
			h4,p,span,del,a,input,h3{
				background-color: aqua;
				width: 400px;
				height: 200px;
				margin: auto;  /* 给盒子设置水平居中 */
				text-align: center; /* 文本居中 */
			}
			a{
				display: block;  /* 将a标签转化为块元素 */
			}
		</style>
	</head>
	<body>
		<!-- 标签的显示模式
		1.块元素： block
		比较霸道，单独占一行
		默认宽度是父级元素宽度的100%
		可以设置宽，高和对齐性
		块元素可以包含行内元素和其他元素
		文本标签(h1-h6,p)内不要再装块元素
		2.行内元素：inline
		一行显示多个
		默认的宽度是内容的宽度
		宽，高和对齐性设置无效
		行内元素只能包含文本或其他行内元素，一般不要包含块元素
		链接标签不要在包含其他连接
		3.行内块元素 inline-block:
		一行显示多个
		默认的宽度是内容的宽度
		可以设置宽，高和对齐性
		<input /><img /><td></td>
		元素显示模式的转换：
		display:block/inline/inline-block;
		 -->
		 <h4>小米su7</h4>
		 <h3>苹果</h3>
		 <p>性能旋风...</p>
		<span>2399</span>   <!-- 可以上下为一行 -->
		<del>2499</del>
		<a href="www.baidu.com">百度一下</a>
		<input type="text"/>
		<input type="password"/>
	</body>
</html>
